
/*
     图片以及小圆点的自动切换
     点击小圆点切换图片
     点击左右按钮切换图片
*/
//获取元素
var imgs = document.querySelectorAll('.imgs>li');
//console.log(imgs);
var cirs = document.querySelectorAll('.cirs>li');
var box = document.querySelector('.box');
var num = 0;
var left = document.getElementsByClassName('left')[0];
var right = document.getElementsByClassName('right')[0];
//设置定时器
var time = setInterval(run,2000);

//给box绑定事件
box.onmouseover = function(){
   clearInterval(time);
}
box.onmouseout = function(){
   time = setInterval(run,2000);
}

function run(){
   clear();
   num++;
   if(num>=imgs.length){
        num = 0;
   }
   //设置指定图片显示
   imgs[num].setAttribute('class','show');
   cirs[num].setAttribute('class','cbg');
}

//给小圆点绑定点击事件
for(var i=0;i<cirs.length;i++){
   cirs[i].index = i;
   cirs[i].onclick = function(){
        clear();
        num = this.index;
        imgs[num].setAttribute('class','show');
        cirs[num].setAttribute('class','cbg');
   }
}

function clear(){
   for(var i=0;i<imgs.length;i++){
        imgs[i].removeAttribute('class');
        cirs[i].removeAttribute('class');
   }
}

//给左右按钮绑定点击事件
right.onclick = function(){
   clear();
   if(num == 4){
        num = 0;
        imgs[num].setAttribute('class','show');
        cirs[num].setAttribute('class','cbg');
   }else{
        num++;
        imgs[num].setAttribute('class','show');
        cirs[num].setAttribute('class','cbg');
        console.log(num);
   }
}
left.onclick = function(){
   clear();
   if(num == 0){
        num = 4;
        imgs[num].setAttribute('class','show');
        cirs[num].setAttribute('class','cbg');
   }else{
        num--;
        imgs[num].setAttribute('class','show');
        cirs[num].setAttribute('class','cbg');
        console.log(num);
   }
}
